"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/10/30
 */
import * as React from 'react'
import {autoSize, commonProps, commonStyles} from "../../assets/styles/common";
import {areaPickStyles, focusStyles} from "../../assets/styles/archive";

const {connect} = require('react-redux');
const NavigationBar = require('react-native-navbar').default;
const {Actions} = require("react-native-router-flux");
import {focusList} from "../../assets/data";
import MyText from "../../component/MyText";
import MyIcon from "../../component/icon";
import {guideStyles} from "../../assets/styles/guide";
import {UserProfilePage} from "../../interface/router";
import Request from "../../utils/Request";
import Colors from "../../assets/styles/Colors";


const {View, FlatList, Image, TouchableOpacity} = require('react-native');
const {List, WhiteSpace} = require('antd-mobile');


class FocusPage extends React.Component<UserProfilePage, any> {


    state = {
        focusList: [],
    };


    componentDidMount(): void {
        this.props.dispatch({
            type: 'user/fetchHotMembers',
            payload: {}
        })
    }

    onFocus = (user: userItem) => {
        let focusList = this.state.focusList;
        const index = focusList.indexOf(user.id);

        if (index === -1) {
            focusList.push(user.id);
        } else {
            focusList.splice(index, 1);
        }

        this.props.dispatch({
            type: 'user/follow',
            payload: {
                follower: this.props.auth.userInfo.id,
                concerned: user.id
            }
        })
    };
    renderListItem = (p) => {
        const index = p.index;
        const item: userItem = p.item;
        return (
            <View style={focusStyles.listItem}>
                <Image source={{uri: Request.checkImageUrl(item.avatar)}}/>
                <View style={commonStyles.flex1}>
                    <MyText style={focusStyles.listItemNameText}>{item.nickName}</MyText>
                    <MyText
                        style={focusStyles.listItemAddressText}>{`${item.duty ? item.duty + '在' : ''}${item.company.name}`}</MyText>
                </View>
                <TouchableOpacity
                    style={this.state.focusList.indexOf(item.id) !== -1 ? focusStyles.listItemFocusStatus : focusStyles.listItemUnFocusStatus}
                    onPress={this.onFocus.bind(this, item)}>
                    <MyIcon
                        name={this.state.focusList.indexOf(item.id) !== -1 ? 'icon-guanzhuzuozheyiguanzhu' : 'icon-guanzhuzuozhe'}
                        size={20}
                        color={this.state.focusList.indexOf(item.id) !== -1 ? Colors.Active : '#ccc'}/>
                </TouchableOpacity>
            </View>
        )
    };

    render() {
        return (
            <View style={[commonStyles.container, focusStyles.container]}>
                <NavigationBar {...commonProps.navBar}
                               rightButton={{
                                   title: '下一步', tintColor: '#D8BB26', handler: () => {
                                       Actions.replace('tab')
                                   }
                               }}
                               title={{title: '推荐关注', tintColor: '#fff'}}
                />
                <FlatList
                    style={commonStyles.flex1}
                    data={this.props.user.hotMembers}
                    keyExtractor={(item, index) => index}
                    extraData={this.state}
                    ItemSeparatorComponent={() => <WhiteSpace size='xs'/>}
                    renderItem={this.renderListItem}
                />
                {/*<TouchableOpacity style={guideStyles.loginBth}>*/}
                {/*<MyText style={{color:'#fff'}}>关注全部</MyText>*/}
                {/*</TouchableOpacity>*/}
            </View>
        );
    }
}


export default connect(
    ({auth, user}) => ({auth, user})
)(FocusPage);